<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>线性渐变</title>
		<style type="text/css">
			.wrap {
				margin: 100px auto;
				width: 1000px;
				height: 30px;
				background-color: #CCCCCC;
				border-radius: 10px;
			}
			.inner {
				width: 600px;
				height: 100%;
				/* background-color: #e24442; */
				/* background-image: linear-gradient(to right,  #e24442 200px, #24955f 200px, #24955f 400px, #328dcd 400px, #328dcd 600px, #8d56a8 600px, #8d56a8 800px, #f1c40f 800px); */
				background-image: repeating-linear-gradient(45deg ,#8bc34a 0px,#8bc34a 20px, #4caf50 20px, #4caf50 40px);
				color: white;
				border-radius: 10px 0 0 10px;
				text-align: center;
				line-height: 30px;
				animation-name: scroll;
				animation-duration: .5s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}
			@keyframes scroll{
				to{
					background-image: repeating-linear-gradient(45deg ,#4caf50 0px,#4caf50 20px, #8bc34a 20px, #8bc34a 40px);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				完成度60%
			</div>
		</div>
	</body>
</html>
